<script setup>
import { ref } from 'vue';
import axios from 'axios';
import * as echarts from 'echarts';

// 获取图表容器的引用，用于之后初始化 ECharts 实例
const chartContainer = ref(null);
let chartInstance = null; // 保存当前图表实例

// 通用函数：更新图表，根据不同的端点和图表类型来动态生成图表
const updateChart = async (endpoint, chartType) => {
  try {
    // 发送 HTTP 请求获取数据
    const response = await axios.get(endpoint);
    const data = response.data.data || response.data; // 处理数据，确保拿到正确的格式

    // 销毁之前的图表实例，防止内存泄漏或多个实例叠加显示
    if (chartInstance) {
      chartInstance.dispose();
    }

    // 初始化 ECharts 图表实例
    chartInstance = echarts.init(chartContainer.value);

    let option = {};

    // 根据图表类型选择相应的配置
    if (chartType === 'bar') {
      // 处理柱状图数据
      if (Array.isArray(data)) {
        const categories = data.map(item => item.class_name); // 获取分类名称数组
        const counts = data.map(item => item.count); // 获取分类数量数组

        option = {
          title: {
            text: '商品分类柱状图',
            left: 'center'
          },
          tooltip: {},
          xAxis: {
            type: 'category',
            data: categories,
            nameLocation: 'middle',
            nameTextStyle: {
              fontSize: 20
            }
          },
          yAxis: {
            type: 'value',
            nameLocation: 'middle',
            nameTextStyle: {
              fontSize: 20
            }
          },
          series: [
            {
              type: 'bar',
              data: counts,
              itemStyle: {
                color: '#409EFF'
              }
            }
          ]
        };
      } else {
        console.error('柱状图数据格式错误:', data);
      }

    } else if (chartType === 'pie') {
      // 处理饼状图数据
      if (typeof data === 'object') {
        const keys = Object.keys(data); // 获取数据中的键（分类）
        const values = Object.values(data); // 获取数据中的值（对应分类的订单量）

        option = {
          title: {
            text: '出库入库订单量饼状图',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '订单量',
              type: 'pie',
              radius: '50%',
              data: keys.map((key, index) => ({ name: key, value: values[index] })),
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
      } else {
        console.error('饼状图数据格式错误:', data);
      }

    } else if (chartType === 'line') {
      // 处理折线图数据
      if (data && Array.isArray(data.totalInSums) && Array.isArray(data.totalOutSums)) {
        option = {
          title: {
            text: '2024年出库入库年度月度营业额折线图',
            left: 'left'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['入库总金额', '出库总金额'],
            right: '0%'
          },
          xAxis: {
            type: 'category',
            data: Array.from({ length: 12 }, (_, i) => `${i + 1}月`),
            nameLocation: 'middle',
            nameTextStyle: {
              fontSize: 20
            }
          },
          yAxis: {
            type: 'value',
            nameLocation: 'middle',
            nameTextStyle: {
              fontSize: 20
            }
          },
          series: [
            {
              name: '入库总金额',
              type: 'line',
              data: data.totalInSums,
              itemStyle: {
                color: '#67C23A'
              }
            },
            {
              name: '出库总金额',
              type: 'line',
              data: data.totalOutSums,
              itemStyle: {
                color: '#409EFF'
              }
            }
          ]
        };
      } else {
        console.error('折线图数据格式错误:', data);
      }
    }

    // 应用配置并渲染图表
    chartInstance.setOption(option);

    // 监听窗口大小变化，调整图表大小
    window.addEventListener('resize', () => {
      chartInstance.resize();
    });

  } catch (error) {
    console.error('获取数据失败:', error);
  }
};

// 绑定按钮点击事件到图表更新函数
const classCount = () => {
  updateChart('/api/inventory/class/count', 'bar'); // 请求商品分类的柱状图数据
};

const orderCount = () => {
  updateChart('/api/order/count', 'pie'); // 请求出库入库订单量的饼状图数据
};

const yearlySums = () => {
  updateChart('api/order/yearly/sums?year=2024', 'line'); // 请求年度折线图数据
};
</script>

<template>
  <div>
    <!-- 添加按钮以触发不同的图表显示 -->
    <el-button type="success" @click="classCount" plain>商品分类柱状图</el-button>
    <el-button type="success" @click="orderCount" plain>出库入库订单量饼状图</el-button>
    <el-button type="success" @click="yearlySums" plain>出库入库年度月度营业额折线图</el-button>

    <!-- 图表显示区域 -->
    <el-card>
      <!-- 用于显示图表的容器 -->
      <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
    </el-card>
  </div>
</template>

<style scoped>
/* 使图表容器有边距和对齐 */
.el-card {
  margin: 20px;
}
</style>
